<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fnx" uri="http://java.sun.com/jsp/jstl/functionsx"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="/WEB-INF/views/head.jsp"/>
    <style>
        .tabs{}
        .tabs li{float:left;background-color:#f4f4f4;border-left:1px solid #e2e2e2;border-top:1px solid #ddd;border-right:1px solid #ddd;margin-right:0px;}
        .tabs li a{color:#555555;float:left;text-decoration:none;padding:5px 12px;}
        .tabs li a:link,.tabs li a:visited,.tabs li a:hover,.tabs li a:active{text-decoration:none;}
        .tabs li.active{background-color:#FFFFFF;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;}
        .tabs li.active a{color:#fff;background:#ed5565;border-color:#ed5565;}
        .tabs li.hover{background-color:#e7e7e7;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;}
        .tabs li.hover a{color:#000;}
        .contentTop{
            height: 400px;
            width:calc(100% + 10px);
            margin-bottom: 20px;
            margin-left: -5px;
        }
        .topLeft{
            float: left;
            width:66.6666666666%;
            height: 100%;
            padding: 0 5px;
        }
        .topRight{
            float: left;
            width: 33.3333333333%;
            height: 100%;
            padding: 0 15px;
        }
        .information{
            height:calc(50% - 10px);
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 20px;
            overflow: hidden;
        }
        .information h4{
            margin: 0;
            color: #ed5565;
        }
        .information div h5{
            margin: 10px 0 5px 0;
            font-size: 16px;
        }
        .information p{
            margin-bottom: 5px;
        }
        .information p:last-child span{
            display: block;
            margin-bottom: 5px;
        }
        .information p:first-child span{
            color: #ed5565;
        }
        .information div p{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
            width: 100%;
            height: 97px;
            overflow: hidden;
            text-overflow: ellipsis;
         }
        .container{
            width: calc(100% + 20px);
            padding: 0;
            margin-left: -10px;
            margin-bottom: 0px;
        }

        .container>li{
            width: 50%;
            list-style: none;
            float: left;
            height: 355px;
            padding: 0 10px;
            margin-bottom: 20px;
        }
        @media (min-width: 1200px){
            .container > li {
                width: 33.33333333%;
            }
        }
        .contBox{
            width: 100%;
            height: 100%;
            border: 1px solid #d3d3d3;
            padding: 15px;
            color: #898989;
            border-radius: 4px;
        }
        .contBox:hover{
            box-shadow: 0px 0px 1px 1px #ed5565;
        }
        .banner{
            height: 280px;
        }
        .banner img{
            height: 220px;
            width: 100%;
        }
        .banner h4{
            width: 100%;
            color: #333;
            margin-top: 0;
            height: 30px;
            line-height: 30px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .banner div{
            position: relative;
            background: rgba(154, 151, 153, 0.36);
        }
        .banner div .newly{
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            margin-left: -25px;
            cursor: pointer;
        }
        .banner div .working{
            position: absolute;
            top: 0;
            right: 0;
            background: #a1a1a1;
            z-index: 11;
            font-size: 12px;
            padding: 5px 10px;
            text-align: center;
            min-width: 70px;
            color: #ffffff;
        }
        .banner div .working_living{
            background: #ed5565;
        }
        .living div .newly,.living div .working_break{
            display: none;
        }
        .btnBox{
            width: calc(100% + 30px);
            display: flex;
            margin-left: -15px;
        }
        .btnBox a{
            flex: 1 1 auto;
            height: 58px;
            line-height: 44px;
            width: 33.33333333%;
            color: #999999;
            border-bottom-width: 0;
        }
        .btnBox a:nth-child(3){
            border-right-width: 0;
            border-top-right-radius: 0;
        }
        .btnBox a:nth-child(1){
            border-left-width: 0;
            border-top-left-radius: 0;
        }
        .imgWrap{
            background: rgba(154, 151, 153, 0.36);
            height: 100%;
        }
    </style>
    <script>
      $(function() {
        $("#radio").buttonset();
        $("#sortHead").headSort();
        $("#tabs li").each(function(){
          $(this).hover(function(){
            if(!$(this).hasClass("active")) {
              $(this).addClass("hover");
            }
          },function(){
            $(this).removeClass("hover");
          });
        });

      });
      function confirmDelete() {
        return confirm("<s:message code='confirmDelete'/>");
      }
      function optSingle(opt) {
        if(Cms.checkeds("ids")==0) {
          alert("<s:message code='pleaseSelectRecord'/>");
          return false;
        }
        if(Cms.checkeds("ids")>1) {
          alert("<s:message code='pleaseSelectOne'/>");
          return false;
        }
        var id = $("input[name='ids']:checkbox:checked").val();
        var url = $(opt+id).attr("href");
        if(url) {
          location.href=$(opt+id).attr("href");
        } else {
          alert("<s:message code='noPermission'/>");
        }
      }
      function optMulti(form, action, confirmMsg) {
        if(Cms.checkeds("ids")==0) {
          alert("<s:message code='pleaseSelectRecord'/>");
          return false;
        }
        if(confirmMsg) {
          if($.isFunction(confirmMsg)) {
            if(!confirmMsg()) {
              return false;
            }
          } else {
            if(!confirm(confirmMsg)) {
              return false;
            }
          }
        }
        form.action=action;
        form.submit();
        return true;
      }
      function optDelete(form) {
        optMulti(form,"delete.do",confirmDelete);
      }
      function chooseLive(order) {

        <%--location.href = 'focuslist.do?returnUrl=core/publish_center/node_choose_info&targetNodeId=${queryNodeId}';--%>
      }
    </script>
</head>
<body class="skin-blue content-body">
<jsp:include page="/WEB-INF/views/commons/show_message.jsp"/>
<div class="content-header">
    <h1>直播</h1>
</div>
<div class="content">
    <div class="box box-primary">
        <div class="box-body table-responsive">
            <div class="contentTop">
                <div class="topLeft">
                    <div class="imgWrap">
                        <img src="" alt="图片未加载">
                    </div>
                </div>
                <div class="topRight">
                    <div class="information">
                        <h4>直播信息</h4>
                        <div>
                            <h5>直播标题</h5>
                            <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
                        </div>
                    </div>
                    <div class="information">
                        <p><span>状态：</span><span>直播中</span></p>
                        <p><span>机位：</span><span>1</span></p>
                        <p><span>分辨率：</span><span>高清</span></p>
                        <p><span>帧率：</span><span>50</span></p>
                        <p><span>推流地址：</span><span>w3c.com</span></p>
                    </div>
                </div>
            </div>
            <div class="contentBottom">
                <ul class="container">
                    <li>
                        <div class="contBox">
                            <div class="banner living">
                                <h4>标题</h4>
                                <div>
                                    <img src="" alt="">
                                    <span class="working_living working">直播中</span>
                                    <span class="working_break working">暂无直播</span>
                                    <span class="newly" onclick="">添加直播</span>
                                </div>
                            </div>
                            <div class="btnBox btn-group">
                                <a href="javascript:;" class="btn btn-default">变更</a>
                                <a href="javascript:;" class="btn btn-default">中断直播</a>
                                <a href="javascript:;" class="btn btn-default">禁用弹幕</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contBox">
                            <div class="banner ">
                                <h4>标题</h4>
                                <div>
                                    <img src="" alt="">
                                    <span class="working_living working">直播中</span>
                                    <span class="working_break working">暂无直播</span>
                                    <span class="newly">添加直播</span>
                                </div>
                            </div>
                            <div class="btnBox btn-group">
                                <a href="javascript:;" class="btn btn-default">变更</a>
                                <a href="javascript:;" class="btn btn-default">中断直播</a>
                                <a href="javascript:;" class="btn btn-default">禁用弹幕</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contBox">
                            <div class="banner ">
                                <h4>标题</h4>
                                <div>
                                    <img src="" alt="">
                                    <span class="working_living working">直播中</span>
                                    <span class="working_break working">暂无直播</span>
                                    <span class="newly">添加直播</span>
                                </div>
                            </div>
                            <div class="btnBox btn-group">
                                <a href="javascript:;" class="btn btn-default">变更</a>
                                <a href="javascript:;" class="btn btn-default">中断直播</a>
                                <a href="javascript:;" class="btn btn-default">禁用弹幕</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contBox">
                            <div class="banner living">
                                <h4>标题</h4>
                                <div>
                                    <img src="" alt="">
                                    <span class="working_living working">直播中</span>
                                    <span class="working_break working">暂无直播</span>
                                    <span class="newly">添加直播</span>
                                </div>
                            </div>
                            <div class="btnBox btn-group">
                                <a href="javascript:;" class="btn btn-default">变更</a>
                                <a href="javascript:;" class="btn btn-default">中断直播</a>
                                <a href="javascript:;" class="btn btn-default">禁用弹幕</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>